#pui-m-confirmBox{
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    width:85%;
    overflow:hidden;
    text-align:center;
    padding-top:10px;
    background:#fff;
    border-radius:3px;
    transform:translate(-50%,-50%);

    .confirmHeaderBox{
        font-weight:bold;
        padding:10px 20px 0;
    }

    .confirmConBox{
        padding:20px 20px 30px;
        line-height:1.5;
    }

    .confirmFoot{
        position:relative;
        height:42px;
        text-align:center;
        font-size:14px;
        color:#0bb20c;
        &:before{
            content : "";
            position:absolute;
            top:0;
            left:0;
            right:0;
            width:100%;
            height:1px;
            font-size:0;
            background:#e5e5e5;
            transform:scaleY(0.5);
        }

        .btn{
            position:relative;
            display:inline-block;
            width:50%;
            height:100%;
            line-height:42px;
        }

        .btn.yes:before{
            position:absolute;
            content:"";
            left:0;
            top:0;
            bottom:0;
            height:100%;
            width:1px;
            font-size:0;
            background:#e5e5e5;
        }

        .btn.cancel{
            color : #777
        }

    }

}
@media screen and (-webkit-device-pixel-ratio: 3){
    #pui-m-confirmBox .confirmFoot{
        height:48px;
        line-height:48px;

        .btn{
            height:48px;
            line-height:48px;
        }

    }
}


#pui-m-confirmBox.entry{
    display:block;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.185)!important;
}

#pui-m-confirmBox.transition{
    display:block;
    opacity:1;
    transform: translate(-50%, -50%) scale(1)!important;
    transition-property: transform, opacity!important;
    transition-duration: .2s;
}
#pui-m-confirmBox.leave{
    display:block;
    opacity:0;
    transition-property: transform, opacity!important;
    transition-duration: .3s;
    transform: translate(-50%, -50%) scale(1)!important;
}



#pui-m-confirmMask{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity : 0.6;
    background:#000;
}



#pui-m-confirmMask.entry{
    display:block;
    opacity: 0;
}

#pui-m-confirmMask.transition{
    display:block;
    opacity:0.5;
    transition-property: opacity!important;
    transition-duration: .2s;
}
#pui-m-confirmMask.leave{
    display:block;
    opacity:0;
    transition-property: opacity!important;
    transition-duration: .3s;
}